<template>
  <div class="post">
    <a class ="userimage">
<!--      <img src="http://image.fengfengzhidao.com/gvb_1009/20231123092743__1123-i.png">-->
      <img src="https://ts1.cn.mm.bing.net/th/id/R-C.738148bdb2da83e7bab5d7f63d1190cd?rik=usj6CNEFf1B92w&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20140311%2f20140311162033-282564199.jpg&ehk=eRgO3fxJa6CqLG1pjx7VaCyEV5qGOTFOR9r3yG1veYA%3d&risl=&pid=ImgRaw&r=0">
    </a>
    <div class="post_title">
      <a class="username">{{ props.userId }}</a>
    </div>
    <a class="message">
      {{ props.content }}
    </a>
    <div class="post_info">
      <span class="date">
        <i class="iconfont icon-lishijilu"></i>
        {{props.time}}
<!--        .format('YYYY-MM-DD HH:mm:ss')-->
      </span>
      <span class="like" :class="{ 'liked': isLiked }" @click="toggleLike">
            <i class="iconfont icon-zan"/>
            {{ isLiked ? props.likeNum+1 : props.likeNum }}
        </span>
      <span class="reply" @click="toggleReplyBox">回复</span>
    </div>
    <div v-if="showReplyBox"  class="reply_box">
      <textarea ref="replyBoxRef" draggable="false" v-model="replyContent" placeholder="写下你的回复..."></textarea>
      <el-button @click="postReply">发表回复</el-button>
    </div>

    <!-- 二级评论列表 -->
    <div v-if="secondComments.length">
      <SecondLevelComment
          v-for="(comment, index) in secondComments"
          :key="index"
          :comment-id="comment.id"
          :userId="comment.user_id"
          :time="comment.time"
          :content="comment.comment_content"
          :likeNum="comment.likeNum"
      />
    </div>

  </div>

</template>

<script setup>
import { ref, onMounted, nextTick, defineProps } from 'vue';
import SecondLevelComment from './SecondLevelComment.vue';
import VideoApi from "@/apis/VideoApi.js";
import {ElMessage} from "element-plus";
import {AuthApi} from "@/apis/authApi.js";

// {
//   "id": 10,
//     "user_id": 3,
//     "video_id": 10,
//     "comment_id": 0,
//     "time": "Feb 6, 2025, 9:12:52 PM",
//     "comment_content": "asdffew",
//     "likeNum": 0
// },


const props = defineProps({
  commentId: Number,
  userId: String | Number,
  time: String,
  content: String,
  likeNum: Number,
});

const userInfo = ref(null)

const isLiked = ref(false);

const showReplyBox = ref(false);

const replyBoxRef = ref(null)
const replyContent = ref('');

const secondComments = ref([]);
const showReplies = ref(false);

onMounted(async () => {
  await fetchUserInfo()
  await fetchSecondComments();
});

async function fetchSecondComments(){
  const res = await VideoApi.fetchSecondComments(props.commentId,10,1)
  console.log('成功获取二级评论',props.commentId,res.data)
  secondComments.value = res.data.comment_second_list;
}
async function fetchUserInfo(){
  const res = await AuthApi.fetchUserInfo(props.userId);
}

function toggleLike() {
  isLiked.value = !isLiked.value;
}

function toggleReplyBox() {
  showReplyBox.value = !showReplyBox.value;
  if (showReplyBox.value) {
    nextTick(() => {
      // 自动聚焦到 input
      document.querySelector('.reply_box textarea')?.focus();
    });
  }
}


function postReply() {
  try {
    const res = VideoApi.commentVideoComment(props.commentId, replyContent.value)
    ElMessage.success('回复成功');
    fetchSecondComments();
  } catch (e) {
    ElMessage.error('回复失败');
  }

  // 重新获取二级评论
  replyContent.value = '';
}


const loadMoreReplies = async () => {
  // 示例：加载更多二级评论
  // const response = await yourApi.loadMoreReplies(props.commentId);
  // replies.value.push(...response.replies);
};
</script>

<style scoped lang="less">
.post{
  width: 100%;
  background-color: white;
  position: relative;
  // margin-top: 40px;
  padding: 20px 0px 24px 76px;
  border-bottom: 1px solid #e7e7e7;

  .userimage{
    position: absolute;
    left: 14px;
    top: 20px;
    width: 40px;
    height: 40px;
    display: inline-block;

    img{
      width: 40px;
      height: 40px;
      display: inline-block;
      border-radius: 50%;
    }
  }

  .post_title{
    margin-bottom: 12px;
    color: #0f0f0f;
    font-size: 14px;
    line-height: 18px;

    .username{
      color: #757575;
      line-height: 18px;
    }
  }

  .message{
    margin-bottom: 16px;
    min-height: 1px;
    color: #212121;
    line-height: 18px;
    font-size: 14px;
    word-wrap: break-word;
  }

  .post_info{
    color: #99a2aa;
    font-size: 0;

    .date{
      font-size: 14px;
      color: #999;
      text-align: left;
      display: inline-block;
      line-height: 18px;
      margin-right: 23.5px;
    }

    .like{
      font-size: 14px;
      color: #999;
      text-align: left;
      display: inline-block;
      line-height: 18px;
      margin-right: 23.5px;

      .iconfont{
        vertical-align: middle;
        cursor: pointer;
        color: #999;

        &:hover{
          color:#00a1d6;
        }
      }
    }

    .liked{
      color: rgb(102.2, 177.4, 255);
      .iconfont{
        color: rgb(102.2, 177.4, 255) !important;
        fill: rgb(102.2, 177.4, 255);
      }
    }

    .reply,
    .delete{
      font-size: 14px;
      color: #999;
      text-align: left;
      display: inline-block;
      line-height: 18px;
      margin-right: 23.5px;
      cursor: pointer;

      &:hover{
        color:#00a1d6;
      }
    }
  }


  .reply_box {
    margin-top: 16px;
    position: relative;

    textarea {
      border: 1px solid #e7e7e7;
      border-radius: 2px;
      display: block;
      width: 100%;
      height: 84px;
      padding: 12px 16px;
      margin-bottom: 12px;
      word-break: break-all;
      line-height: 20px;
      color: #212121;

      &:focus,
      &:focus-visible,
      &:not(:placeholder-shown) {
        border-color: #00a1d6;
        outline: none;
      }
    }

    button {
      background-color: #00a1d6;
      color: white;
      border-radius: 2px;
      border: 1px solid #00a1d6;
      padding: 4.5px 15px;
    }
  }

  //.article_wrap{
  //  position: absolute;
  //  right: 20px;
  //  top: 20px;
  //  width: 100px;
  //  text-align: center;
  //
  //  .pic{
  //    display: block;
  //    width: 100px;
  //    height: 60px;
  //    background: #f1f3f7 url() no-repeat 50%;
  //    margin-bottom: 10px;
  //    border-radius: 4px;
  //
  //    img{
  //      display: block;
  //      width: 100px;
  //      height: 60px;
  //      border-radius: 4px;
  //    }
  //  }
  //
  //  .article_title{
  //    width: 100px;
  //    display: inline-block;
  //
  //    .name{
  //      font-size: 12px;
  //      color: #505050;
  //    }
  //  }
  //}
}
</style>